
<!DOCTYPE html>
<html style="height: 100%" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>客户拜访占比统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="/resources/images/favicon.ico">
    <link rel="stylesheet" href="/resources/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/resources/css/layuimini.css?v=2.0.4.2" media="all">
    <link rel="stylesheet" href="/resources/css/themes/default.css" media="all">
    <link rel="stylesheet" href="/resources/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">

</head>
<body style="height: 100%; margin: 0">
<!-- 查询条件开始 -->
<blockquote class="layui-elem-quote">
    <form class="layui-form" id="searchFrm" lay-filter="searchFrm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="startTime" readonly id="startTime" placeholder="请选择开始时间" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="endTime" readonly id="endTime" placeholder="请选择结束时间" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <input type="button" value="查询" class="layui-btn" lay-submit id="doSearch" lay-filter="doSearch">
                <input type="reset" value="重置" class="layui-btn layui-btn-danger">
            </div>
        </div>
    </form>
</blockquote>
<!-- 查询条件结束-->
<div id="container" style="height: 80%"></div>
<script src="/resources/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/resources/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['layer', 'miniTab','echarts','form','jquery','laydate'], function () {
        let echarts=layui.echarts;
        let form=layui.form;
        let $=layui.jquery;
        let laydata=layui.laydate;
        //渲染时间选择器
        laydata.render({
            elem:"#startTime",
            type:"datetime"
        })
        laydata.render({
            elem:"#endTime",
            type:"datetime"
        })

        //监听doSearch按钮
        form.on("submit(doSearch)",function (obj) {
            //请求数据
            $.get("/stat/statVisitLogCount.do",obj.field,function (res) {
                if(res.code==200){
                    render(res.data);
                }else{
                    layer.msg(res.msg);
                }
            })
            return false;
        })
        //渲染图标
        function render(data) {
            let dom = document.getElementById("container");
            let myChart = echarts.init(dom);
            let app = {};
            let option;
            option = {
                title: {
                    text: '业务员拜访次数统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data.name,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '次数',
                        type: 'bar',
                        barWidth: '60%',
                        data: data.value
                    }
                ]
            };
            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
        }

    });
</script>
</body>
</html>